<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import { getFillingDataApi } from "@/api/charts"
import { type DayReportFillingSummaryData } from "@/api/charts/types/charts"
import { type FormInstance } from "element-plus"
import { getRandomType } from "@/utils/common"
import DayReportDetail from "@/components/report/DayReportDetail.vue"
import { useRoute, useRouter } from "vue-router"
import { getDateByOffset } from "@/utils/common"
const route = useRoute()
const router = useRouter()
watch(route, () => {
  router.go(0)
})

defineOptions({
  // 命名当前组件
  name: "Filling"
})
const loading = ref<boolean>(false)

const searchData = reactive({
  day: getDateByOffset(-1)
})

const tableData = ref<DayReportFillingSummaryData>()
const searchFormRef = ref<FormInstance | null>(null)

const getTableData = () => {
  console.log("get filling data")
  loading.value = true
  getFillingDataApi(searchData.day)
    .then(({ data }) => {
      console.log("get filling data success ")
      tableData.value = data
    })
    .catch(() => {
      console.log("get filling data error ")
      tableData.value = undefined
    })
    .finally(() => {
      loading.value = false
    })
}

// 某日 的工时详情 用户id参数
const userIdProp = ref<number>(0) // 存储传递给子组件的 id
const dayProps = ref<string>(getDateByOffset(-1))
// 打开工时详情
const handerShowDayReportDetail = (userId: number) => {
  console.log("handerShowDayReportDetail userId = ", userId)
  userIdProp.value = userId
  dayProps.value = searchData.day
}

onMounted(() => {
  getTableData()
})
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="day" label="日期">
          <el-date-picker
            v-model="searchData.day"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item prop="enable" label="">
          应填报人数<el-button type="danger" size="small" round> {{ tableData?.num }}</el-button
          >, 已填报 <el-button type="danger" size="small" round>{{ tableData?.filledNum }}</el-button> 未填报<el-button
            type="danger"
            size="small"
            round
            >{{ tableData?.unfilledNum }}</el-button
          >
          填报率 <el-button type="danger" size="small" round>{{ tableData?.rate }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="table-wrapper">
        <el-table :data="tableData?.list" border stripe :height="450">
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="date" label="日期" align="center">
            <template #default="scope">
              <el-tooltip
                v-if="scope.row.total > 0"
                class="box-item"
                effect="light"
                content="查看工时详情"
                placement="top"
                :hide-after="0"
              >
                <el-button type="primary" text size="small" @click="handerShowDayReportDetail(scope.row.id)">{{
                  searchData.day
                }}</el-button>
              </el-tooltip>
              <span v-else>{{ searchData.day }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="groupName" label="小组" align="center">
            <template #default="scope">
              <el-tag :type="getRandomType(scope.row.groupId)" effect="dark" round> {{ scope.row.groupName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="工时" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.total > 0" type="success" effect="plain" disable-transitions>{{
                scope.row.total
              }}</el-tag>
              <el-tag v-else type="danger" effect="plain" disable-transitions>{{ scope.row.total }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 某日 工时详情抽屉组件 -->
    <DayReportDetail
      :userId="userIdProp"
      :day="dayProps"
      @detail-complete="
        () => {
          userIdProp = 0
        }
      "
    />
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}
</style>
